<template>
  <h4 class="title_lv2">关于http状态码约定</h4>
  <div class="statement">
    <ol>
      <li>返回成功状态码为：2000</li>
      <li>登录失败状态码为：4001</li>
    </ol>
  </div>

  <div class="hr das"></div>

  <h4 class="title_lv2">关于http返回数据格式</h4>
  <div class="statement">
    <ol>
      <li>必须拥有 code、data、message 属性</li>
      <li>当状态码返回非2000时message必须有返回值</li>
    </ol>
  </div>

  <!-- 页面代码 源码 -->
  <dropWrap key="oreo">
    <pre><code class="language-js">{{ htm }} </code></pre>
  </dropWrap>
  <!-- 页面代码 源码 -->

  <div class="hr das"></div>

  <h4 class="title_lv2">关于http常用请求方法</h4>
  <div class="statement">
    <ol>
      <li>get、post、put、delete、download</li>
      <li>参数 PORT1:路由前缀，在/src/api/config/servicePort.ts</li>
      <li>参数 loading:用来 开启/关闭 接口loading</li>
    </ol>
  </div>

  <!-- 页面代码 源码 -->
  <dropWrap key="ffs">
    <pre><code class="language-js">{{ httpCode }} </code></pre>
  </dropWrap>
  <!-- 页面代码 源码 -->
</template>
  
<script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
import Prism from "prismjs";
import "../prism.css";

import dropWrap from "../dropWrap.vue";
/* 响应式变量 */

//变量 htm 用于存放 组件源码 code
let htm = ref<string>(`
   {
    code:2000,
    data:{},
    message:""
   }
  `);
let httpCode = ref<string>(`
    1: http.get<Menu.MenuOptions[]>(PORT1 + /menu/list, {}, { loading: false });

    2: http.post<Login.ResLogin>(PORT1 + /login, params, { loading: false });

    3: http.download(PORT1 + /user/export, params);
  `);

/* 
  生命周期
  */
onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
});
</script>
  <style lang="scss" scoped>
.el-row::v-deep {
  margin-bottom: 20px;
}
</style>
  